<template>
  <div id="app">
    <nav v-if="$route.meta.showNav">
      <li><router-link to="/">推荐音乐</router-link></li>

      <li><router-link to="/hot">热歌榜</router-link></li>
      <li><router-link to="/search">搜索</router-link></li>
    </nav>
    <router-view
      @update:currentSong="currentSong = $event"
      :style="{ marginBottom: '100px' }"
      :currentSong="currentSong"
      :playing="playing"
      @update:currentPLayList="currentPLayList = $event"
    />

    <audio
      :src="
        currentSong
          ? `https://music.163.com/song/media/outer/url?id=${currentSong.id}.mp3`
          : ''
      "
      controls
      autoplay
      style="height: 50px; position: fixed; top: 50px"
      ref="audio"
      @play="playing = true"
      @pause="playing = false"
      @timeupdate="currentTime = $event.target.currentTime"
      @durationchange="duration = $event.target.duration"
      @ended="nextSong"
    ></audio>

    <CustomPlay
      :currentSong="currentSong"
      :playing="playing"
      :currentTime="currentTime"
      :duration="duration"
      @audio-play-handler="$refs.audio.play()"
      @audio-pause-handler="$refs.audio.pause()"
      @update:currentTime="$refs.audio.currentTime = $event"
      :currentPLayList="currentPLayList"
      @update:currentSong="currentSong = $event"
      @prev-song="prevSong"
      @next-song="nextSong"
    />
  </div>
</template>

<script>
import CustomPlay from "@/components/CustomPlay.vue";

export default {
  components: {
    CustomPlay,
  },
  data: function () {
    return {
      currentSong: null,
      playing: false,
      currentTime: 0,
      duration: 0,
      currentPLayList: [],
    };
  },
  methods: {
    prevSong: function () {},
    nextSong: function () {
      var currentIndex = this.currentPLayList.findIndex((o) => {
        return o.id === this.currentSong.id;
      });

      console.log(currentIndex);

      var index =
        currentIndex === this.currentPLayList.length - 1 ? 0 : currentIndex + 1;
      this.currentSong = this.currentPLayList[index];
    },
  },
  watch: {
    currentPLayList: function (n) {
      this.currentSong = n[0];
    },
  },
};
</script>


<style lang="less">
.animated {
  animation-duration: 0.3s;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
body {
  margin: 0;
}
nav {
  display: flex;
  // border-bottom: 3px solid green;
  box-shadow: 0 -3px 0 0 rgb(216, 216, 216) inset;

  li {
    flex: 1;
    list-style: none;
    text-align: center;

    a {
      font-weight: bold;
      color: #2c3e50;
      text-decoration: none;

      padding-bottom: 30px;
      display: inline-block;

      &.router-link-exact-active {
        color: #42b983;
        border-bottom: 3px solid red;
      }
    }
  }
}
</style>
